/**
 * Created by Administrator on 2016/12/15.
 */
var cas = document.getElementById('canvas');
var ctx = cas.getContext('2d');
var stars = [];
var starFlag = false;
var timer;
window.onload = function(){
    init();
}
function init(){
    DrawImage();
    cas.onmousemove = function(e){
        mousemove(e);
    }
}
function DrawImage(){
    var girl = document.getElementsByClassName('image')[0];
    ctx.fillStyle = '#393550';
    ctx.fillRect(0,0,cas.width,cas.height);
    ctx.drawImage(girl,100,150,600,300);
}
function createStars(){
    starFlag = true;
    for(var i = 0;i < 50;i++){
        stars[i] = new drawStar();
    }
}
function gameLoop() {
   timer = setInterval(function(){
        DrawImage();
        for(var i = 0;i < 50;i++){
            stars[i].update();
            stars[i].setStars();
        }
    },66);

}

function mousemove(e){
   var flag = false;
    if(e.pageX >= 100 && e.pageX <= 700 && e.pageY >= 150 && e.pageY <= 450){
        flag = true;
    }else{
//      setTimeout(
          clearInterval(timer)
//      ,300);
        DrawImage();
        flag = false;
        starFlag = false;
    }
    if(flag == true && !starFlag){
        createStars();
        gameLoop();
    }
}